<template>
  <div class="container">
    <!-- 轮播图 -->
    <div class="banner">
      <el-carousel arrow="always" :interval="3000" :height="bannerHeight + 'vw'">
        <el-carousel-item v-for="item in bannerList" :key="item.title" >
          <img :src="url + item.filePath" style="" alt="" @click="goWatch(item)">
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 新闻通知 -->
    <picture-text :newstype="trainNew"></picture-text>
    <!-- 链接直达 -->
    <function-link class="shotbox"></function-link>
    <!-- 图片展示 -->
    <div class="photo longbox">
      <div class="shotbox">
        <el-row>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" style="padding: 20px;">
            <div class="image-box">
              <img class="image-img" :src="url + firstItem.filePath" alt="" @click="goWatch(firstItem)">
              <div class="title-pic-big">
                <span>{{firstItem.discription}}</span>    
              </div>
            </div>
          </el-col>
          <el-col class="right-box" :xs="24" :sm="24" :md="12" :lg="12">
            <el-row style="padding: 20px;">
              <el-col :xs="24" :sm="24" :md="12" :lg="12" v-for="(item,index) in picList" :key="index" style="padding:5px">
                <div class="image-box">
                  <img class="image-img" :src="url + item.filePath" alt="" @click="goWatch(item)">
                  <div class="title-pic">
                    <span>{{ item.discription }}</span>    
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 活动展示 -->
    <div class="active shotbox">
      <div class="title">
        {{ title }}
      </div>
      <div class="title1">
        {{ discription }}
      </div>
      <el-row :gutter="30">
        <el-col :xs="24" :sm="24" :md="8" :lg="8" v-for="(item,index) in activePic" :key="item.index">
          <div class="image-mask" @click="goWatch(item)">
            <img class="image" style="height: 200px;" :src="url + item.filePath" alt="">
            <div :class="{mask: isAcive}">操舞品牌</div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 视频展示 -->
    <div class="video shotbox">
      <div class="title">
        操舞精彩视频
      </div>
      <div class="video-box">
        <el-carousel arrow="always" type="card" indicator-position="none" :height="bannerHeight*2/3 + 'vw'" :autoplay="false">
          <el-carousel-item v-for="item in videoList" :key="item.title">
            <video
              ref="myVideo"
              controls
              :src="url + item.filePath"
              class="video-div"
            ></video>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="links shotbox">
      <div class="title">
        操舞合作伙伴
      </div>
      <el-row :gutter="20">
         <el-col :xs="12" :sm="6" :md="3" :lg="3" v-if="partner" v-for="(item,index) in partner" :key="index">
          <div class="link-box">
            <img :src="item.filePath" alt="">
          </div>
        </el-col>
         <!-- <el-col :xs="12" :sm="6" :md="3" :lg="3">
          <div class="link-box">
            <img src="@/assets/link1.jpg" alt="">
          </div>
        </el-col>
         <el-col :xs="12" :sm="6" :md="3" :lg="3">
          <div class="link-box">
            <img src="@/assets/link1.jpg" alt="">
          </div>
        </el-col>
         <el-col :xs="12" :sm="6" :md="3" :lg="3">
          <div class="link-box">
            <img src="@/assets/link1.jpg" alt="">
          </div>
        </el-col>
         <el-col :xs="12" :sm="6" :md="3" :lg="3">
          <div class="link-box">
            <img src="@/assets/link1.jpg" alt="">
          </div>
        </el-col>
         <el-col :xs="12" :sm="6" :md="3" :lg="3">
          <div class="link-box">
            <img src="@/assets/link1.jpg" alt="">
          </div>
        </el-col>
         <el-col :xs="12" :sm="6" :md="3" :lg="3">
          <div class="link-box">
            <img src="@/assets/link1.jpg" alt="">
          </div>
        </el-col>
         <el-col :xs="12" :sm="6" :md="3" :lg="3">
          <div class="link-box">
            <img src="@/assets/link1.jpg" alt="">
          </div>
        </el-col> -->
      </el-row>  
    </div>
  </div>
</template>

<script>
import http from '@/utils/baseUrl'
import {getBannerList,getIndexVideo,getTherePic,getFivePic,partner,titleDis} from "@/api/official";
import PictureText from '@/components/PictureText/index.vue'
import FunctionLink from '@/components/FunctionLink/index.vue'
export default {
  name: 'HomeView',
  components: {
    PictureText,
    FunctionLink
  },
  created() {
    this.getBanner()
    this.getVideo()
    this.getActivePic()
    this.getPartner()
  },
  data() {
    return {
      isAcive:true,
      url: http,
      title:'操舞品牌活动',
      discription:'操舞品牌活动操舞品牌活动操舞品牌活动操舞品牌活动操舞品牌活动操舞品牌活动操舞品牌活动操舞品牌活动操舞品牌活动',
      videoList:[],
      bannerHeight:30,  // banner默认高度
      windowWidth: document.documentElement.clientWidth,  //实时屏幕宽度
      bannerList: [],
      activePic:[],
      picList:[],
      firstItem:{},
      trainNew:{
        title:'新闻通知',
        type:'',
        label:'最新动态'
      },
      partner:[]
    }
  },
  // <!--在watch中监听实时宽高-->
  watch: {
    windowWidth (val) {
      let that = this;
      if(val<768) {
        this.bannerHeight = 50
      } else {
        this.bannerHeight = 30
      }
    }
  },
  mounted () {
    this.getWindowWidth()
  },
  methods: {
    watchPic(item) {
      console.log('mouseover',item)
    },
    getBanner() {
      getBannerList().then(res => {
        this.bannerList = res.data.list
      })
      titleDis().then(res => {
        console.log(res)
        this.title = res.title
        this.discription = res.discription
      })
    },
    // 品牌活动
    getActivePic() {
      getTherePic().then(res => {
        this.activePic = res.data.list
      })
      getFivePic().then(res => {
        let newArr = res.data.list
        this.firstItem = newArr[0]
        this.picList = newArr.filter((val,index,newArr)=>{
          return index !== 0
        })
      })
    },
    getWindowWidth() {
      let that = this;
      // <!--把window.onresize事件挂在到mounted函数上-->
      window.onresize = () => {
        return (() => {
          window.fullWidth = document.documentElement.clientWidth;
          that.windowWidth = window.fullWidth; // 宽
        })()
      };
      if(that.windowWidth<768) {
        this.bannerHeight = 60
      } else {
        this.bannerHeight = 30
      }
    },
    getVideo() {
      getIndexVideo().then(res => {
        this.videoList = res.data.list
      })
    },
    // 查看新闻详情
    goWatch(e) {
      const url = e.links
      window.open(url, '_blank')
    },
    getPartner() {
      partner().then(res => {
        const newArr = res.data.list
        this.partner = newArr.map(item => {
            return {
                filePath: this.url + item.filePath
            }
          }
        )
      })
    }
  }
}
</script>
<style scoped>
.banner img{
  display: inline-block;
  height: auto;
  max-width: 100%;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

.link-box {
  text-align: center;
}
.link-box img {
  width: 100%;
  height: 40px;
}
.link-box button {
  display: block;
  margin:0 auto 10px;
}
.image-box {
  position: relative;
  width: 100%;
  padding-top: 100%;
}
.image-box .title-pic {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  line-height: 40px;
  font-size: 18px;
}
.image-box .title-pic span {
  display: inline-block;
  padding-left: 20px;
  width: 14em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.image-box .title-pic-big {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  line-height: 40px;
  font-size: 18px;
}
.image-box .title-pic-big span {
  display: inline-block;
  padding-left: 20px;
  width: 28em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.image-mask {
  position: relative;
  padding: 0;
}
.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.image-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.right-box .image{
  width: 100%;
  height: 130px;
}

.active .image {
  width: 100%;
  display: block;
}
.video .video-box {
  position: relative;
}
.video-div {
  width: 100%;
  height: auto;
  display: block;
}
@media screen and (max-width: 768px) {
  .image-box .title-pic-big span {
    display: inline-block;
    padding-left: 20px;
    width: 15em;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .image-box .title-pic span {
    display: inline-block;
    padding-left: 20px;
    width: 15em;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}
</style>